<template>
  <div class="login sns-login">
    SNS-LOGIN
    <div class="login-con">
      <div class="log-bg"></div>
      <Card icon="log-in" :bordered="false">
        <div class="form-title">{{$t("sns-login.title")}}</div>
        <div class="form-con">
          <Form ref="loginForm" :model="formInline" :rules="ruleInline" @keydown.native.enter.prevent ="handleSubmit" @keyup.enter="keyDownEvent()">
            <FormItem prop="userName">
              <Input class="login-input" v-model.trim="formInline.userName" :placeholder='$t("sns-login.placeholderUsername")' autocomplete="off">
              </Input>
            </FormItem>
            <FormItem prop="password">
              <Input class="login-input" type="password" v-model="formInline.password" :placeholder='$t("sns-login.placeholderPassword")'  autocomplete="off">
              </Input>
            </FormItem>
            <FormItem prop="wpbool">
              <Checkbox class="login-checkbox" v-model="wpbool" @on-change="changPw">{{ $t("sns-login.loginForgetPW") }}</Checkbox><!--<span>{{ $t("sns-login.loginDownApp") }}--></span>
              <div class="form-index" @click="gotoIndex">回到首页</div>
            </FormItem>
            <FormItem>
              <Button @click="handleSubmit" type="primary" long  class="button-shadow" :loading="loading">{{ $t("sns-login.loginBtn")}}</Button>
            </FormItem>
            <p class="login-tip" v-show="showTip">{{ $t("sns-login.loginTip") }} <Icon type="md-arrow-round-forward" /></p>
          </Form>
        </div>
      </Card>
    </div>
  </div>
</template>
<script>
import i18n from "./locale";
import ValidatorRule from "@/filters/validator-rule";
import { mapActions } from "vuex";
import loginIcon from "@/assets/images/logo-icon.png";
export default {
  data() {
    return {
      i18n: i18n,
      showTip: false,
      loginIcon: loginIcon,
      loading: false,
      formInline: {
        userName: "",
        password: ""
      },
      ruleInline: {
        userName: ValidatorRule.user,
        password: ValidatorRule.password
      },
      wpbool: false
    };
  },

  methods: {
    gotoIndex() {
      this.$router.push({
        name: "index",
        query: { from: "login" }
      });
    }
  }
};
</script>
<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  position: relative;
  &-con {
    position: absolute;
    right: 160px;
    top: 50%;
    /*transform: translateY(-50%);*/
    right: 160px;
    top: 30%;
    width: 320px;
    &-header {
      font-size: 16px;
      font-weight: 300;
      text-align: center;
      padding: 30px 0;
    }
    .form-con {
      padding: 10px 0 0;
    }
    .login-tip {
      font-size: 14px;
      text-align: center;
      color: #999;
    }
    .login-icon {
      width: 20px;
      vertical-align: text-top;
      margin-right: 5px;
    }
  }

  .log-bg {
    background: #fff;
    width: 320px;
    height: 100%;
    position: absolute;
    top: 0px;
    opacity: 0.7;
  }

  .ivu-card {
    background: transparent;
  }

  .login-input {
    input {
      border-radius: 5px;
    }
  }

  .login-checkbox {
    margin-left: 20px;
    color: #999;
  }

  .button-shadow {
    border-radius: 40px;
    /*box-shadow: 0px 15px 60px 0px #5158d4;*/
  }

  .form-index {
    float: right;
    cursor: pointer;
    color: #999;
    margin-right: 5px;
  }
}
</style>
